<template>
  <div class="manage-dashboard-account-overview-container">
    <div class="overview-group has-advice">
      <div style="height: 475px;" class="overview-content-container manage-dashboard-account-overview-data">
        <div class="overview-header">
          <div class="overview-header-left"><span class="content-title">数据概览</span></div>
          <div class="one-select-medium one-main one-select one-select-enabled" style="width: 110px;">
            <div class="one-select-selection one-select-selection--single" type="single" tabindex="0">
              <div class="one-select-selection__rendered">
                <div unselectable="on" class="one-select-selection__placeholder"
                     style="display: none; user-select: none;">请选择
                </div>
                <el-select v-model="value1" placeholder="请选择">
                  <el-option label="今天"
                             value="今天">
                  </el-option>
                  <el-option label="今天"
                             value="过去7天">
                  </el-option>
                  <el-option label="过去7天"
                             value="过去14天">
                  </el-option>
                  <el-option label="过去14天"
                             value="过去30天">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;overflow-x: auto;height: 120px">
          <div class="data-trend-cards">
            <div @click="form.trendsType=item.trendsType;getpaymentData()"
                 v-for="item in atastatistics.trendHeads" :key="item.trendsType"
                 :class="form.trendsType==item.trendsType?'data-trend-card-active':''"
                 class="data-trend-card  data-trend-cards-0 data-trend-cards-cost"><img
                src="https://tuiguang.baidu.com/oneWeb//static/2d34b4d7411bdf65db63230df583d519.png"
                alt="">

              <div class="data-trend-card-content">
                <div class="data-trend-card-content-data">
                  <div class="data-trend-card-content-unit">{{ item.trendsType }}（元）</div>
                  <div class="data-trend-card-content-ratio">
                    <div class="triangle-arrow triangle-arrow-bottom"
                         style="width: 0px;height: 0px;border-color: rgb(90, 204, 101) transparent transparent;border-style: solid;border-width: 5px;"></div>
                    {{ item.proportion }}
                  </div>
                </div>
                <div class="data-trend-card-content-value">{{ item.trendsNumber }}</div>
              </div>
            </div>

          </div>

        </div>
        <div class="overview-content-indicator">
          <div class="overview-trend"><span class="overview-trend-filter overview-trend-filter-item"><span
              class="one-dropdown-button-containers device-select overview-trend-filter-item"><span
              class="one-dropdown-trigger"><button type="button" name=""
                                                   class="one-button one-dropdown-button one-dropdown-button-small one-dropdown-button-text one-main one-button-text one-button-small"><span>全部设备<svg
              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
              class="dls-icon one-dropdown-button-arrow-down-icon" focusable="false"><path fill="currentColor"
                                                                                           fill-rule="evenodd"
                                                                                           d="M13.709 16.406a2 2 0 0 1-2.918 0L4.02 9.184l1.458-1.368 6.771 7.222 6.77-7.222 1.46 1.368-6.771 7.222z"
                                                                                           clip-rule="evenodd"></path></svg></span></button></span></span></span>
            <div ref="chart" style="min-width: 400px;height: 300px;margin-left: 20px"></div>
          </div>
          <div  v-if="atastatistics.rankingCity.length!==0"  class="overview-region-data">
            <el-table border
                :data="atastatistics.rankingCity"
                style="width: 100%"
                align="center"
            >
              <el-table-column prop="name" label="排名" min-width="50">
                <template slot-scope="scope">
                  {{ scope.$index+1 }}
                </template>
              </el-table-column>
                <el-table-column
                    prop="cityCode"
                    label="省份"
                    align="center"
                    min-width="100">
                </el-table-column>
                <el-table-column
                    prop="trendsNumber"
                    label="展现(次)"
                    align="center"
                    min-width="80">
                </el-table-column>
            </el-table>
          </div>
          <div v-else class="overview-region-data">
            <div class="overview-region-data-title">
              <div class="overview-region-data-row-index">排序</div>
              <div class="overview-region-data-row-province">省份</div>
              <div class="overview-region-data-row-value">消费(元)</div>
            </div>
            <ul>
              <div class="no-data">
                <div>暂无地域数据概览</div>
              </div>
            </ul>
          </div>

        </div>
      </div>
      <div class="overview-content-container optimize-suggestion-container">
        <div class="overview-header">
          <div class="content-title">优化建议</div>
        </div>
        <div class="overview-content-main optimize-suggestion-main">
          <div class="suggestion-tip">您的账户存在定向等方面存在优化空间，为您找到如下3个优化建议，请及时查看。</div>
          <div class="suggestion-content">
            <div class="opt-grid">
              <div class="grid-title"><span class="name">添加新关键词</span><span><span
                  class="one-text-link detail one-text-link-medium one-text-link-normal"
                  @click="btnXiu">详情</span></span></div>
              <div class="grid-content"><span class="desc">预估可能新增展现量</span><span class="value"><span
                  class="number-value">+12.03万</span><span class="period"><span>/</span><span>周</span></span></span>
              </div>
            </div>
          </div>
          <button @click="btnXiu" type="button" name=""
                  class="one-button view-more one-main one-button-normal one-button-medium"><span>查看全部</span>
          </button>
        </div>
      </div>
    </div>
    <div class="overview-content-container home-diagnosis-container">
      <div class="one-loading-nested-loading one-loading-nested-loading-normal">
        <div class="one-loading-container">
          <div class="overview-header flex-row diagnosis-title">
            <div class="content-title"><span class="content-title-text">波动分析</span>
              <div class="content-desc"><span>当期：2024-04-14 0:00-18:00</span><span>vs</span><span>同期：2024-04-13 0:00-18:00</span>
              </div>
            </div>
            <div class="content-filter">
              <div class="hint-text">诊断数据更新至：2024-04-13</div>
              <div class="one-radio-group one-radio-group-medium one-radio-group-row">
                <el-radio-group v-model="radio1">
                  <el-radio-button label="昨日"></el-radio-button>
                  <el-radio-button label="今日"></el-radio-button>

                </el-radio-group>
              </div>
              <el-select style="width: 120px;" v-model="value3" placeholder="请选择" class="select-with-prefix">
                <el-option
                    label="日环比"
                    value="日环比">
                </el-option>
                <el-option
                    label="日同比"
                    value="日同比">
                </el-option>
              </el-select>

            </div>
          </div>
          <div class="flex-row"><span>消费变化量最大的出价策略/计划<svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                          viewBox="0 0 24 24" min-width="24" height="24"
                                                          class="dls-icon brave-the-winds-common-libs-tips-icon"
                                                          focusable="false"><path fill="currentColor"
                                                                                  d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path
              fill="currentColor" fill-rule="evenodd"
              d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
              clip-rule="evenodd"></path></svg></span><span class="diagnose-link"><span
              class="one-text-link one-text-link-medium one-text-link-strong"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   fill="none" viewBox="0 0 24 24"
                                                                                   min-width="24" height="24"
                                                                                   class="dls-icon " focusable="false"><path
              fill="currentColor"
              d="M7 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-5h2v5a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5h5v2H7z"></path><path
              fill="currentColor"
              d="m18.386 4.243-3.24-.003.002-2 4.663.005a2 2 0 0 1 1.997 2.002l-.005 4.65-2-.001.004-3.245-6.428 6.428-1.415-1.415 6.422-6.42z"></path></svg>去诊断更多波动分析</span></span>
          </div>
          <div class="overview-content-main diagnosis-main">
            <div class="empty-wrapper"><span><div><img class="comp-empty-svg"
                                                       src=""
                                                       alt=""></div>暂无数据</span></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="overview-content-container user-portrait-container">
        <div class="overview-header">
          <div class="content-title">用户画像</div>
          <div class="content-filter">
            <el-select style="width: 120px;" v-model="value" placeholder="请选择" class="select-with-prefix">
              <el-option
                  label="点击人群"
                  value="点击人群">
              </el-option>
              <el-option
                  label="展示人群"
                  value="展示人群">
              </el-option>
            </el-select>
            <el-select style="width: 120px;margin-left: 15px" v-model="value2" placeholder="请选择"
                       class="select-with-prefix">
              <el-option
                  label="昨天"
                  value="昨天">
              </el-option>
              <el-option
                  label="过去七天"
                  value="过去七天">
              </el-option>
            </el-select>

          </div>
        </div>
        <div class="overview-content-main user-portrait-main">
          <div class="business-title">
            <div class="overview-content-main no-data"><img class="no-data-svg"
                                                            src=""
                                                            alt="">
              <div class="no-data-tip">您的广告展现积累用户较少，无法得出准确用户画像</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="manage-main-foot">
      <div class="report-main-list"><span class="hidden"><footer class="cpu-footer cpu-footer-simple"><div
          class="cpu-footer-copyright"><span>©2024 Baidu</span> <a target="_blank" rel="noopener noreferrer"
                                                                   href="https://www.baidu.com/duty">使用百度前必读</a> <a
          target="_blank" rel="noopener noreferrer"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a> 互联网信息服务许可 我已阅读并接受<a
          target="_blank" rel="noopener noreferrer" href="http://e.baidu.com/accept.html">百度推广服务合同</a> 欢迎访问<a
          target="_blank" rel="noopener noreferrer" href="http://rules.baidu.com/userpolicy">百度推广政策中心</a></div></footer></span>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import echartsUrl from './echartsNOdata.png'
import * as echarts from 'echarts';
import {getOptimizationCenterList} from '@/services/model/managecenter'
import {datastatisticsList} from "@/services/model";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      echartsUrl: echartsUrl,
      atastatistics: {rankingCity:[]},
      form: {
        trendsType: '消费',

        optimizationType: '全部'
      },
      value1: '过去30天',
      isToggleStatus: false,

      chart: null,
      value: '点击人群',
      value3: '日环比',
      radio1: '昨日',
      value2: '昨天',
      sumTypeList: [{
        value: '消费',
        label: '消费'
      }, {
        value: '展示',
        label: '展示'
      }, {
        value: '点击',
        label: '点击'
      }, {
        value: '平均点击价格',
        label: '平均点击价格'
      }],
      options2: [{
        value: '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      },
        {
          value: '下载设置',
          label: '下载设置'
        },],
      options: [{
        value: 0,
        label: '合计'
      }, {
        value: 1,
        label: '分时'
      }, {
        value: 2,
        label: '分日'
      }, {
        value: 3,
        label: '分周'
      }, {
        value: 4,
        label: '分月'
      }],
      isSelect: '账户整体',
      activeName: '整体走势',

    };
  },
  methods: {
    tabClick() {

    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      let xData = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '02:00', '24:00'];
      let series = [];
      let hasData = this.atastatistics.trends.length>0;  // 检查是否有数据
      if (hasData) {
        xData = []
      }
      this.atastatistics.trends.map(x => {
        xData.push(x.trendsGenerateTime);
        series.push(x.trendsNumber);
      });

      let option = {

        tooltip: {},
        legend: {
          data: ['网站流量', '搜索引擎']
        },
        xAxis: {  axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLine: {  // 控制轴线是否显示
            show: true,
            lineStyle: {
              color:'rgb(197,204,219)' // 轴线颜色
            }
          },

          type: 'category',  // 类别轴，适用于离散的类别数据
          data: xData
        },
        yAxis: {
          // name: '消费',  // X轴的名称
          axisLine: {  // 控制轴线是否显示
            show: true,
            lineStyle: {
              color: '#333'  // 轴线颜色
            }
          },
          type: 'value',  // 数值轴，适用于连续数据
          min: 0,  // Y轴的最小值
          max: 500,  // Y轴的最大值
          splitLine: {
            show: false  // 不显示Y轴的网格线
          }
        },
        series: [{ lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
            itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          },showSymbol: false,
          name: '计算结果',
          type: 'line',
          data: series
        }],
        graphic: []  // 初始化 graphic 数组
      };

      // 当没有数据时，显示自定义图形和文本
      if (!hasData) {
        option.graphic.push({
          type: 'image',
          id: 'logo',
          right: 'center',
          top: 50,
          z: -10,
          bounding: 'raw',
          origin: [75, 75],
          style: {
            image: this.echartsUrl,  // 设置你的图像路径
            width: 300,

            opacity: 0.8
          }
        });
        option.graphic.push({
          type: 'text',
          left: 'center',
          top: 'middle',
          z: 100,
          style: {

            font: 'italic bolder 16px Microsoft YaHei',
            fill: '#000',
            opacity: 0.6
          }
        });
      }

      this.chart.setOption(option);
    },
    //   获取数据趋势
    async getpaymentData() {
      if (this.value1 == '今天') {
        const end = new Date()
        const start = new Date()
        this.timerArray = [start, end]
      } else if (this.value1 == '过去7天') {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.timerArray = [start, end]
      } else if (this.value1 == '过去14天') {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
        this.timerArray = [start, end]
      } else if (this.value1 == '过去30天') {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.timerArray = [start, end]
      }
      this.form.productType = null

      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let data = await datastatisticsList(this.form)
      this.atastatistics = data.data
      this.initChart()
    },
    async queryList() {
      // if(   this.form.optimizationType=='全部'){
      //   this.form.optimizationType=''
      // }
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);

      let res = await getOptimizationCenterList(this.form)
       const modifiedArray = this.replaceNullWithDash( res.rows);
                this.tableList = modifiedArray|| []
       this.form.total = Math.ceil(Number(res.total) );
    },

    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    this.form.optimizationType = '全部'
    this.$nextTick(() => {
      this.getpaymentData()
      this.queryList()
    })
  },
};
</script>
<style lang="less">
.data-trend-cards {
  display: flex;
  margin-top: 10px;

  .data-trend-card {
    display: flex;
    background: #f7f8f8;
    border-radius: 6px;
    width: 276px;
    height: 79px;
    align-items: center;
    cursor: pointer;
    margin-left: 20px;

    img {
      width: 40px;
      height: 40px;
      margin: 0 10px;
    }

    .data-trend-card-content {
      cursor: pointer;
      box-sizing: var(--light-ai-box-sizing, border-box);
      height: 47px;

      .data-trend-card-content-data {
        display: flex;
        justify-content: space-between;
        width: 200px;

        .data-trend-card-content-unit {
          font-size: 12px;
          color: #999;
          line-height: 18px;
        }

        .data-trend-card-content-ratio {
          display: flex;
          font-size: 12px;
          color: #000;
          line-height: 18px;

          .triangle-arrow {
            width: 0px;
            height: 0px;
            border-color: rgb(90, 204, 101) transparent transparent;
            border-style: solid;
            border-width: 5px;

          }
        }
      }

      .data-trend-card-content-value {
        font-size: 24px;
        line-height: 26px;
        margin-top: 3px;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .data-trend-card-active {
    background-image: linear-gradient(137deg, #5f51ff, #326fff 76%) !important;

    .data-trend-card-content {
      cursor: pointer;
      box-sizing: var(--light-ai-box-sizing, border-box);
      height: 47px;

      .data-trend-card-content-data {
        display: flex;
        justify-content: space-between;
        width: 200px;

        .data-trend-card-content-unit {
          font-size: 12px;
          line-height: 18px;
          opacity: .8;
          color: #fff;

        }

        .data-trend-card-content-ratio {
          display: flex;
          font-size: 12px;
          color: #fff;
          line-height: 18px;

          .triangle-arrow {
            width: 0px;
            height: 0px;
            border-color: rgb(90, 204, 101) transparent transparent;
            border-style: solid;
            border-width: 5px;

          }
        }
      }

      .data-trend-card-content-value {
        font-size: 24px;
        line-height: 26px;
        margin-top: 3px;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #fff;
      }
    }
  }
}
</style>
<style scoped>
.manage-dashboard-account-overview-container {
  min-height: 500px;
  color: #282c33;
}

.manage-dashboard-account-overview-container .overview-group {
  display: flex;
  margin-bottom: 24px;
}

.manage-dashboard-account-overview-container .overview-group.has-advice .manage-dashboard-account-overview-data {
  width: calc(100% - 332px);
  margin-right: 24px;
}

.manage-dashboard-account-overview-container .overview-group .manage-dashboard-account-overview-data {
  flex-grow: 1;
  margin-bottom: 0;
}

.manage-dashboard-account-overview-container .overview-content-container {
  border-radius: 6px;
  background-color: #fff;
  padding: 24px;
}

.manage-dashboard-account-overview-container .overview-content-container .overview-header-left {
  display: flex;
  align-items: center;
}

.manage-dashboard-account-overview-container {
  color: #282c33;
}

.manage-dashboard-account-overview-container .overview-content-container .overview-header-left .content-title {
  font-size: 18px;
  color: #282c33;
  font-weight: 500;
  margin-right: 16px;
}

.manage-dashboard-account-overview-container .overview-group .optimize-suggestion-container, .manage-dashboard-account-overview-container .overview-group .industry-competitiveness-container {
  position: relative;
  width: 260px;
  height: 475px;
  padding: 20px;
  box-sizing: border-box;
}

.optimize-suggestion-container .optimize-suggestion-main {
  font-size: 14px;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-tip {
  line-height: 21px;
  color: #848b99;
  text-align: justify;
  padding-bottom: 12px;
  margin-top: 8px;
  border-bottom: 1px solid #ebedf5;
}

.opt-grid {
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  line-height: 1.4;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #282c33;
  font-size: 14px;
  margin: 0;
  box-sizing: var(--light-ai-box-sizing, border-box);
  padding: 16px 0;
  border-bottom: none;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-title .name {
  width: 126px;
  display: inline-block;
  color: #282c33;
  font-weight: 600;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-title .detail {
  font-size: 12px;
  color: #0052cc;
  float: right;
  text-decoration: none;
  cursor: pointer;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-content {
  padding-top: 9px;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-content .desc {
  font-size: 12px;
  color: #848b99;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-content .value {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #282c33;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-content .value .number-value {
  font-size: 16px;
  color: #cc1800;
}

.optimize-suggestion-container .optimize-suggestion-main .suggestion-content .opt-grid .grid-content .value .period {
  font-size: 12px;
  color: #cc1800;
}

.optimize-suggestion-container .optimize-suggestion-main .view-more {
  position: absolute;
  bottom: 24px;
  width: 212px;
  margin-top: 8px;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.manage-dashboard-account-overview-container .overview-content-container {
  border-radius: 6px;
  background-color: #fff;
  padding: 24px;
  margin-bottom: 24px;
}

.manage-dashboard-account-overview-container .overview-group .manage-dashboard-account-overview-data {
  flex-grow: 1;
  width: calc(100% - 48px);
  margin-bottom: 0;
}

.manage-dashboard-account-overview-container .overview-group.has-advice .manage-dashboard-account-overview-data {
  width: calc(100% - 332px);
  margin-right: 24px;
}

.manage-dashboard-account-overview-container .overview-content-container .overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-sum-report {
  margin: 14px 20px;
}

.one-carousel {
  position: relative;
}

.one-carousel .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.one-carousel .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  outline: none;
  width: 100%;
}

.one-carousel .slick-initialized .slick-slide {
  display: block;
}

.one-carousel .slick-slide div {
  outline: none;
}

.overview-sum-report-card {
  box-sizing: border-box;
  border-radius: 6px;
  padding: 12px;
  background-color: #f3f5fd;

  cursor: pointer;
  position: relative;
}

.overview-sum-report-card.selected {
  opacity: 0.9;
  background-image: linear-gradient(51deg, #9a5ee8 0%, #5387ff 51%);
}

.overview-sum-report-card.selected * {
  color: #fff;
}

.overview-sum-report-card-name {
  font-size: 12px;
}

.overview-sum-report-card-value {
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: #282c33;
  font-weight: 500;
  margin-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 28px;
  line-height: 28px;
}

.overview-sum-report-card.selected * {
  color: #fff;
}

.overview-sum-report-card.small .overview-sum-report-card-compare-ratio {
  position: static;
}

.one-carousel .slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: none;
}

.one-carousel .slick-slide img {
  display: block;
  margin: auto;
}

.overview-sum-report .slick-track {
  max-height: 95px;
  overflow-y: hidden;
}

.dls-icon {
  display: inline-block;
  width: auto;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

.overview-sum-report-card .card-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 74px;
}

.one-carousel-slick-change {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overview-content-indicator {
  display: flex;
  max-height: 272px;
}

.overview-content-indicator .overview-region-data-title, .overview-content-indicator .overview-region-data-row {
  display: flex;
  line-height: 30px;
  align-items: center;
}

.overview-content-indicator .overview-region-data-title {
  font-weight: 500;
  border-bottom: 1px solid #e2e6f0;
  background-color: #fff;
  z-index: 2;
}

.overview-content-indicator .overview-region-data {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #282c33;
  min-width: 310px;
  margin-left: 12px;
  position: relative;
}

.overview-content-indicator .overview-region-data-title-index, .overview-content-indicator .overview-region-data-row-index {
  width: 45px;
}

.overview-content-indicator .overview-region-data-title-province, .overview-content-indicator .overview-region-data-row-province {
  width: 70px;
}

.overview-content-indicator .overview-region-data-title-value, .overview-content-indicator .overview-region-data-row-value {
  width: 110px;
  text-align: right;
  margin-right: 4px;
}

.overview-content-indicator .overview-region-data ul {
  overflow: auto;
}

.overview-content-indicator .overview-trend {
  position: relative;
  width: calc(100% - 170px);
}

.overview-content-indicator .overview-region-data .no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}

.manage-dashboard-account-overview-container .overview-content-container {
  border-radius: 6px;
  background-color: #fff;
  padding: 24px;
  margin-bottom: 24px;
}

.one-loading-nested-loading {
  position: relative;
}

.one-loading-container {
  transition: all 300ms linear;
}

.home-diagnosis-container .flex-row {
  display: flex;
  margin-bottom: 16px;
  justify-content: space-between;
}

.home-diagnosis-container .diagnosis-title .content-title {
  flex: 1;
  flex-wrap: wrap;
  font-size: 18px;
  color: #282c33;
  font-weight: 500;
  line-height: 1;
}

.home-diagnosis-container .diagnosis-title .content-title-text {
  margin-right: 16px;
}

.home-diagnosis-container .diagnosis-title .content-title .content-desc {
  display: inline-block;
  color: #282c33;
  font-size: 14px;
  line-height: 1.4;
}

.home-diagnosis-container .diagnosis-title .content-title .content-desc span {
  margin-right: 4px;
}

.home-diagnosis-container .diagnosis-title .content-filter {
  display: flex;
  align-items: center;
}

.home-diagnosis-container .hint-text {
  font-size: 12px;
  color: #848b99;
}

.home-diagnosis-container .diagnosis-title .content-filter > div + div {
  margin-left: 8px;
}

.one-radio-group-medium {
  border-radius: 4px;
}

.one-radio-group:not(.one-radio-group-column) .one-radio-group-items {
  margin-top: -8px;
}

.one-text-link-medium {
  font-size: 14px;
}

.one-text-link-strong {
  color: #0054e6;
}

.one-text-link {
  cursor: pointer;
  text-decoration: none;
}

.home-diagnosis-container .diagnosis-main {
  display: flex;
}

.home-diagnosis-container .diagnosis-main .empty-wrapper {
  width: 100%;
  text-align: center;
}

.manage-dashboard-account-overview-container .overview-content-container .overview-content-main.error, .manage-dashboard-account-overview-container .overview-content-container .overview-content-main.no-data {
  min-height: 480px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.manage-main-foot .report-main-list {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cpu-footer-simple {
  background-color: transparent;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  color: #848b99;
  text-align: center;
  line-height: 1.4;
}

a:hover {
  color: #666c76;
  text-decoration: underline;
  text-decoration-color: #666c76; /* 下划线颜色 */
  text-decoration-style: solid; /* 下划线样式 */
  text-decoration-thickness: 1px; /* 下划线粗细 */
}

</style>
<style>
.el-radio-button__inner, .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
}

.el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
}

.el-input__icon {
  height: 30px;
  line-height: 30px;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border: 1px solid #0054e6;
  background-color: #ebf2ff;
  color: #0054e6;
}

.overview-content-indicator .overview-trend {
  position: relative;
  width: calc(100% - 170px);
}

.overview-content-indicator .overview-trend .overview-trend-filter-item {
  display: flex;
  height: 24px;
  align-items: center;
}

.one-dropdown-button-containers .one-dropdown-trigger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.one-charts-line-medium {
  min-height: 260px;
}

.one-charts-line-line-no-data-text {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -24px;
  color: #282c33;
  font-size: 14px;
}

</style>